<template>
<modal :show.sync="show" v-ref:modal big backdrop="false">
  <header slot="modal-header" class="modal-header"style="  height: 150px;
    padding-bottom: 0px;">
    <button type="button" class="close" @click="close"><span>&times;</span></button>
    <h3 style="font-size:2;font-weight: bolder;" class="modal-title"><span>表信息操作详情</span></h3>
    <br/>
    <h4 style="font-size:2;font-weight: bolder;" class="modal-title"><span>表信息</span></h4>
    <div class="t1" style="background-color: #99cd99;">
      <div class="form-group">
        <div class="col-sm-12">


          <center>
            <span class="font1">表号:{{arr.f_meternumber}}</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <span class="font1">表状态:{{arr.f_state}}</span>
          </center> <br />
          <center>
            <span class="font1">气表品牌:{{arr.f_gaswatchbrand}}</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <span class="font1">气表型号:{{arr.f_metertype}}</span>
          </center> <br />
          <center>
            <span class="font1">领表人:{{arr.f_receiver}}</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <span class="font1">领表时间:{{arr.f_receiverdate}}</span>
          </center>

        </div>
      </div>

    </div>
  </header>

  <article slot="modal-body" class="modal-body" style="  height: 450px;
    padding-bottom: 0px;">

    <h4 style="font-size:2;font-weight: bolder;" class="modal-title"><span>详细信息</span></h4>
    <div class="col-sm-12">
      <criteria-paged :model="model" v-ref:jxdk>
        <criteria partial='criteria' @condition-changed='search'>
          <div class="form-group" partial novalidate>
          </div>
        </criteria>
        <data-grid :model="model" partial="list" :is-fixed='false' class="col-sm-12">
          <template partial='head'>
            <tr>
              <th><nobr>序号</nobr></th>
              <th><nobr>操作状态</nobr></th>
              <th><nobr>状态变更时间</nobr></th>
              <th><nobr>领表人</nobr></th>
              <th><nobr>登记人</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td>{{$index+1}}</td>
              <td>{{row.f_changestatus}}</td>
              <td>{{row.f_operatordate}}</td>
              <td>{{row.f_receiver}}</td>
              <td>{{row.f_registrant}}</td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </article>
  <footer slot="modal-footer" class="modal-footer">
  </footer>
</modal>
</template>

<script>
import {
  PagedList
} from 'vue-client'
export default {
  title: '微信回复',
  data () {
    return {
    model: new PagedList('rs/sql/singleTable_OrderBy', 20, {items: "'*'", tablename: "'t_gasmanagenumber'", orderitem: "'id'"})
      // id: {},
      // ok: true,
      // items: {},

    }
  },

  props: ['arr', 'show'],
  watch: {
    'arr' (val) {
      console.log(this.arr.f_meternumber)
      var condition = `1=1 and f_meternumber= '${this.arr.f_meternumber}'`
      console.log(condition)
      this.model.search(condition)
    }
  },
  ready () {
    this.model.search('1=1')
  },
  methods: {
    open (row) {

    },

    close() {
      this.show = false
      this.$emit('reply', this.show)

    }


  }

}
</script>
<style>
td.role {
  text-align: center;
}

span.font1 {
  font-weight: bold;
  font-size: 17px;
}

div.t1 {
  background-color:#99cd99;
}
</style>
